<template>
  <div class="an-wrapper" :style="{top:tweeningValue+'px'}">
    <slot></slot>
  </div>
</template>
<script>
  import TWEEN from '@tweenjs/tween.js';

  export default {
    data() {
      return {
        tweeningValue: 0,
        value: 0,
        isDone: false
      };
    },
    props: {
      interval: {
        default: 5000,
        type: Number,
      },
      stop: {
        default: 0,
        type: Number,
      },
      etop: {
        default: 50,
        type: Number,
      },
    },
    watch: {
      value: function (newValue, oldValue) {
        this.tween(oldValue, newValue);
      },
    },
    mounted: function () {
      this.value = this.tweeningValue = this.stop;
      setInterval(() => {
        if (this.isDone) {
          this.value = this.stop;
        } else {
          this.value = this.etop;
        }
        this.isDone = !this.isDone;
      }, this.interval);
    },
    methods: {
      tween: function (startValue, endValue) {
        var vm = this;

        new TWEEN.Tween({tweeningValue: startValue}).to({tweeningValue: endValue}, this.interval).onUpdate(function (object) {
          vm.tweeningValue = object.tweeningValue.toFixed(0);
        }).start();

      },
    },
  };
</script>
<style lang="less" scoped>
  .an-wrapper {
    position: relative;
  }
</style>
